<template>
  <div class="package-main">
    <ul class="main-wrap">
      <li
        v-for="(item,index) in allData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :key="index"
        class="main-item"
      >
        <el-card :body-style="{ padding: '0px' }" class="nav-item" shadow="never">
          <div class="image">
            <img v-if="item.coverUrl" :src="item.coverUrl" style="width:100%; height: 170px">
            <img v-if="!item.coverUrl" src="../../../../assets/subjectImg.png" style="width:100%; height: 170px">
            <span class="right-tip">{{ item.assetsNum }}个课程</span>
          </div>
          <ul class="class-body">
            <li class="title">{{ item.name }}</li>
            <li class="class-detail">
              <span>简介： {{ item.description ? item.description : '本资产没有简介' }}</span>
            </li>
            <li class="price">
              <span class="real">￥{{ item.price }}</span>
              <span class="ago">￥{{ item.originPrice }}</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { buyPackageBus } from './eventBus'
import { getDigitalAssetsPurchasedList } from '@/api/subject/digitalAssets' // 数据接口
import { getUserId } from '@/utils/auth'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      allData: [],
      filterList: []
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.allData.length / 10)
    }
  },
  mounted() {
    buyPackageBus.$on('handleFilter', (val) => {
      this.handleFilter(val)
    });
    this.getData()
  },
  methods: {
    getData() {
      getDigitalAssetsPurchasedList(getUserId()).then(res => {
        this.allData = res.data.items;
        this.filterList = res.data.items
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    addShoppingItem(item) {
      const trade = Object.assign({}, item);
      buyPackageBus.$emit('addShoppingItem', trade)
    },
    handleFilter(val) {
      this.allData = this.filterList.filter(item => {
        if (val.search && item.name.toLowerCase().indexOf(val.search.toString().toLowerCase()) < 0) return false;
        if (val.kind && item.type !== val.kind) return false;
        if (val.categoryId && item.categoryId !== val.categoryId) return false;
        return true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.package-main {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
  min-width: 1003px;
  .main-wrap {
    overflow: hidden;
    list-style: none;
    padding: 0;
    width: 110%;
    margin: 0 -67px 0 0;

    .main-item {
      margin-top: 20px;
      width: 16.58%;
      float: left;
      margin-right: 2%;
      .nav-item {
        width: 100%;
        min-width: 170px;
        position: relative;
        @media screen and (max-width: 1950px) {
          height: 305px;
        }
        @media screen and (max-width: 1850px) {
          height: 295px;
        }
        @media screen and (max-width: 1750px) {
          height: 285px;
        }
        @media screen and (max-width: 1650px) {
          height: 275px;
        }
        @media screen and (max-width: 1550px) {
          height: 265px;
        }
        @media screen and (max-width: 1450px) {
          height: 255px;
        }
        @media screen and (max-width: 1350px) {
          height: 240px;
        }
        .el-card__body {
          min-width: 170px;
        }
        .left-tip {
          display: inline-block;
          width: 50px;
          height: 25px;
          line-height: 25px;
          position: absolute;
          top: 12px;
          left: 0;
          // background-color: rgba(14, 212, 135, 0.9);
          background-color: rgba(228, 44, 44, 0.9);
          text-align: center;
          color: #fff;
          font-size: 14px;
        }
        .published {
          background-color: rgba(14, 212, 135, 0.9);
        }
        .image {
          position: relative;
          width: 100%;
          overflow: hidden;
          cursor:pointer;
          .right-tip {
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: 4px;
            padding: 0 5px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.6);
          }
        }
        .class-body {
          list-style: none;
          margin: 0;
          padding: 8px 14px 0 14px;
          @media screen and (max-width: 1330px) {
            padding: 14px 4px;
          }
          .title {
            font-size: 16px;
            color: #626669;
          }
          .price {
            height: 32px;
            line-height: 32px;
            .real {
              float: left;
              font-size: 18px;
              color: #f21d1d;
              @media screen and (max-width: 1490px) {
                font-size: 14px;
              }
            }
            .ago {
              font-size: 12px;
              text-decoration: line-through;
              color: #c5c8cb;
              @media screen and (max-width: 1490px) {
                font-size: 10px;
              }
              @media screen and (max-width: 1330px) {
                display: none;
              }
            }
            .reserve {
              float: right;
              color: #979ca0;
              font-size: 14px;
              vertical-align: center;
              @media screen and (max-width: 1490px) {
                font-size: 12px;
              }
            }
          }
          .class-detail {
            padding-top: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span {
              color: #979ca0;
              font-size: 13px;
            }
          }
          .class-button {
            height: 32px;
            width: 100%;
            // padding-top: 4px;
            .el-button {
              float: right;
              margin-left: 10px;
              @media screen and (max-width: 1610px) {
                font-size: 12px;
                margin-left: 2px;
                text-align: center;
                padding: 7px 7px;
                width: auto;
              }
            }
          }
        }
      }
    }
  }
  .el-pagination {
    width: 100%;
    text-align: center;
    height: 30px;
    margin-top: 12px;
  }
}
</style>
